{% extends 'web/layout/basic.html' %}
{% load static %}
{% block title %}用户登陆{% endblock %}

{% block css %}
     <link rel="stylesheet" href="{% static 'web/css/accoun.css' %}">
{% endblock %}

{% block content %}
    <div class="account">
        <div class="title">用户登陆</div>
        <form id="regForm" method="post" novalidate>
          {% csrf_token %}
          {% for field in form %}
              {% if field.name == 'code' %}
                  <div class="form-group">
                    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                    <!--<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">-->
                    <div class="row">
                        <div class="col-md-5" style="padding-left: 10px">
                            {{ field }}
                            <span class="error-msg">{{ field.errors.0 }}</span>
                        </div>
                        <div class="col-md-7">
                            <img src="{% url 'image_code' %}" id="imageCode" title="点击更换图片" alt="#"> <!-- 可以直接写路径，也可以写反向代理："{% url 'image_code' %}"  -->
                        </div>
                    </div>
                  </div>
              {% else %}
                <div class="form-group">
                    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                    <!--<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">-->
                    {{ field }}
                    <span class="error-msg">{{ field.errors.0 }}</span>
                </div>
              {% endif %}
          {% endfor %}

        <div>
            <div style="float: right">
                <a href="{% url 'login_sms' %}">短信验证码登录</a>
            </div>
        </div>

          <div class="row">
              <div class="col-xs-3">
                <button id="btnSubmit" type="submit" class="btn btn-primary" href="">登 录</button>
              </div>
          </div>
        </form>
    </div>
{% endblock %}

{% block js %}
    <!--<script>
        // 整个页面加载完成后会自动执行这个函数
        $(function (){
            bindClickBtnSms();
            bindClickBtnSubmit();
        });
        // 点击获取验证码的按钮绑定的事件。当单击这个按钮时要把输入的手机号码传递给后台函数，好用来发送验证码
        function bindClickBtnSms(){
            $('#btnSms').click(function (){
                // 让用户在点击标签时，原来的错误信息全部清除掉。
                $('.error-msg').empty();
                // 获取用户的手机号码,根据生成输入框的id来获取对应输入框的数据，把数据放在变量mobile_phone中
                var mobile_phone = $('#id_mobile_phone').val();
                // 发送ajax请求，把变量中的手机号码传送给后端的函数。为了保证点击一次60秒倒计时内再次点击，不会再重新发送，需要判断按钮的val()
                if($("#btnSms").val() === "点击获取验证码") {
                    $.ajax({
                        url: "/web/send/sms/",  //地址，要给那个地址传送数据。这个url可以反向生成：url:"｛% url:'send_sms' %｝"
                        type: "GET",  // 传送地址的模式
                        data: {mobile_phone: mobile_phone, tpl: "login"},  // 要传送的数据，data是字典格式的数据
                        dataType: "JSON", // 将服务端返回的数据反序列化为字典，即把res反序列化为字典
                        // 上面ajax的请求发送成功后会执行这个函数，res是后端函数返回的数据
                        success: function (res) {
                            // 当后端的校验成功时，后端返回的res.status=True。并执行函数：sendSmsRemind
                            if (res.status) {
                                sendSmsRemind(res.code); // 在下面定义倒计时的函数：function sendSmsRemind()
                                //alert(res['code']) //通过后端可以利用mobile方法把四位随机数据传送过来
                            } else {
                                //console.log(res)  //后端返回的数据是： {status: false, error: {"mobile_phone":['这个字段是必填项。',]}
                                // 从返回的数据格式可以看出，错误信息是字典中键error的值。取出对应的错误信息并在对应的输入框下面显示
                                $.each(res.error, function (key, value) { // each(要循环的对象，要执行的函数)
                                    $("#id_" + key).next().text(value[0]);
                                })
                            }
                        }
                    })
                }
            })
        }
        // 倒计时函数
         function sendSmsRemind(code){
            var $smsBtn = $("#btnSms");
            $smsBtn.prop("disable",true);
            var time = 60;
            var remind = setInterval(function(){
                $smsBtn.val(time + "秒后重新发送" + code)
                time = time - 1;
                if(time<1){
                clearInterval(remind);
                $smsBtn.val("点击获取验证码").prop("disable",false);
            }
            },1000)
        }
        // 点击注册按钮保存数据
        function bindClickBtnSubmit(){
            $('#btnSubmit').click(function (){
                $('.error-msg').empty();
                // 收集表单中的数据，找到每一个字段。每个表单中的name属性值和输入的数据都可以获取到，还能获取到<form>表单中的csrf_token
                //$('#regForm').serialize()
                // 通过ajax将数据发送到后台
                $.ajax({
                    url:"{% url 'login_sms' %}", // 这里使用的是url反解析，使用路由的name属性：re_path(r'^register/', account.register,name='register'),
                    type: "POST",
                    data:$('#regForm').serialize(),
                    dataType: "JSON",
                    success: function (res) {
                       if(res.status){
                           location.href = res.data //后端函数保存数据到数据库成功，就跳转到data传送过来的url
                       }else {
                           $.each(res.error, function (key, value) { // each(要循环的对象，要执行的函数)
                                    $("#id_" + key).next().text(value[0]);
                            })
                        }
                    }
                })
            })
        }

    </script> -->
    <script>
        $(function (){
             $('#imageCode').click(function (){
                 var oldSrc = $(this).attr("src")
                 $(this).attr("src",oldSrc+"?")
             })
        })
    </script>
{% endblock %}














